<template>
	<div id="Bigalert">
		<div :style="alertstyle">
			<p class="title">{{title}}</p>
			<p class="content" :style="contentstyle">{{content}}</p>
			<div class="btns">
				<div :class="{twoBtn:!hasBtn2}" @click="cancel">
					{{btnName2}}
				</div>
				<div :class="[{oneBtn:hasBtn2},{twoBtn:!hasBtn2}]" @click="confirm">
					{{btnName}}
				</div>
			</div>
			
		</div>
	</div>
</template>

<script>
	export default{
		name:'Bigalert',
		methods:{
			confirm(){
				this.$emit('onconfirm');
			},
			cancel(){
				this.$emit('oncancel');
			}
		},
		props:{
			title:{
				type:String
			},
			content:{
				type:String,
				default:'我们将会在每天早上9:00为您推送满足条件的项目信息。'
			},
			btnName:{
				type:String,
				default:'好的'
			},
			btnName2:{
				type:String,
				default:''
			},
            contentstyle:{
			    type:Object,
			},
			alertstyle:{
			    type:Object
			}
		},
		computed:{
			hasBtn2:function(){
				if(this.btnName2==''){
					return true
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "../styles/common.scss";
#Bigalert{
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background-color: rgba(0,0,0,.5);
	z-index: 1000;
	display: flex;
	flex-direction: column;
	justify-content: center;
	>div{
		margin: 0 auto;
		/*margin-top: px2rem(440);*/
		border-radius: px2rem(10);
		display: flex;
		flex-direction:column;
		background-color:#fff;
		width:px2rem(492);
		>p:first-child{
			padding-top: px2rem(20);
			// padding-bottom: px2rem(20);
			padding-left: px2rem(40);
			padding-right: px2rem(40);
			font-size: px2rem(33);
			color: #333333;
			font-weight: bold;
			text-align: center;
		}
		>p:nth-child(2){
			padding-left: px2rem(40);
			padding-right: px2rem(40);
			// padding-top: px2rem(20);
			font-size: px2rem(29);
			text-align: center;
			padding-bottom: px2rem(40);
			color: #333333;
		}
		>div.btns{
			border-top: 1px solid #e6e6e6;
			
			>div.oneBtn{
				padding-top: px2rem(32);
				padding-bottom: px2rem(32);
				color: #009aed;
				font-size: px2rem(30);
				text-align: center;
			}
			>div.twoBtn{
				float: left;
				width: 49.5%;
				padding-top: px2rem(32);
				padding-bottom: px2rem(32);
				color: #009aed;
				font-size: px2rem(30);
				text-align: center;
				&:first-child{
                    color: #333333;
					border-right: 1px solid #e6e6e6;
				}
			}
		}
	}
}
</style>
